<template>
  <div class="radar-chart-01 chart" ref="radarChart01"></div>
</template>

<script setup>
import { onMounted, ref, inject } from "vue";

const radarChart01 = ref(null);
const echarts = inject("$echarts");

// 参数
let indicatorData = [
  { name: "监管", max: 100 },
  { name: "火警", max: 100 },
  { name: "故障", max: 100 },
  { name: "屏蔽", max: 100 },
  { name: "电源故障", max: 100 },
  { name: "延时", max: 100 },
  { name: "反馈", max: 100 },
];
let seriesData = [80, 60, 20, 70, 50, 20, 10];

let option = {
  compCode: "C202310017",
  backgroundColor: "rgb(3,23,30)",
  radar: {
    shape: "circle",
    // name: {
    //   textStyle: {
    //     color: "#37AFE5",
    //     fontSize: 14,
    //     fontFamily: 'Source Han Sans CN',
    //     fontWeight: 400
    //   },
    // },
    // axisLine: {
    //   lineStyle: {
    //     color: "#2F49A3",
    //   },
    // },
    // splitLine: {
    //   lineStyle: {
    //     color: "#2F49A3",
    //   },
    // },
    // splitArea: {
    //   areaStyle: {
    //     color: ["transparent", "transparent", "transparent", "transparent"],
    //     shadowColor: "rgba(0, 100, 0, 0.3)",
    //   },
    // },
    indicator: indicatorData,
  },
  series: [
    {
      type: "radar",

      data: [
        {
          value: seriesData,
          name: "数据",
          itemStyle: {
            color: "#fff",
          },
          lineStyle: {
            color: "#2D7FD3",
          },
          areaStyle: {
            color: "#1A4E76",
          },
        },
      ],
    },
  ],
};

onMounted(() => {
  const chart = echarts.init(radarChart01.value);
  chart.setOption(option);
});
</script>

<style scoped></style>
